//创建路由器并暴露
import { createRouter,createWebHistory } from "vue-router";

//引入组件
import Home from "@/pages/Home.vue";
import News from "@/pages/News.vue";
import NewsDetail from "@/pages/NewsDetail.vue";
import About from "@/pages/About.vue";
import PropsFather from "@/pages/component-communication/01_props/Father.vue";
import CustomEventFather from "@/pages/component-communication/02_custom-event/Father.vue";
import MittFather from "@/pages/component-communication/03_mitt/Father.vue";
import VModelFather from "@/pages/component-communication/04_v-model/Father.vue";
import AttrsFather from "@/pages/component-communication/05_$attrs/Father.vue";
import RefsFather from "@/pages/component-communication/06_$refs-$parent/Father.vue";
import ProvideFather from "@/pages/component-communication/07_provide-inject/Father.vue";
import PiniaFather from "@/pages/component-communication/08_pinia/Father.vue";
import SlotFather from "@/pages/component-communication/09_slot/Father.vue";
import ShallowVue from "@/pages/other-api/01_shallow/Shallow.vue";
import ReadonlyVue from "@/pages/other-api/02_readonly/Readonly.vue";
import RawVue from "@/pages/other-api/03_raw/Raw.vue";
import CustomRefVue from "@/pages/other-api/04_customRef/CustomRef.vue";

const router = createRouter({
    history:createWebHistory(),
    routes:[
        {
            name:'h',
            path:'/home',
            component: Home
        },
        {
            name:'News',
            path:'/news',
            component: News,
            children:[
                {
                    name:'NewsDetail',
                    path:'detail/:id/:title/:content?',
                    component: NewsDetail,
                    //第一种写法：将paramas作为props传给组件
                    //第二种写法：函数写法，自定义k-v作为props传给组件
                    //第三种写法：对象写法，只能固定参数
                    // props:true,
                    props(route){
                        return route.params
                    },
                },
            ]
        },
        {
            name:'Communication',
            path:'/communication',
            children:[
                {
                    name:'CommunicationPropsFather',
                    path:'props',
                    component: PropsFather,
                },
                {
                    name:'CommunicationCustomEventFather',
                    path:'custom-event',
                    component: CustomEventFather,
                },
                {
                    name:'CommunicationMittFather',
                    path:'mitt',
                    component: MittFather,
                },
                {
                    name:'CommunicationVModelFather',
                    path:'v-model',
                    component: VModelFather,
                },
                {
                    name:'CommunicationAttrsFather',
                    path:'attrs',
                    component: AttrsFather,
                },
                {
                    name:'CommunicationRefsFather',
                    path:'refs',
                    component: RefsFather,
                },
                {
                    name:'CommunicationProvideFather',
                    path:'provide',
                    component: ProvideFather,
                },
                {
                    name:'CommunicationPiniaFather',
                    path:'pinia',
                    component: PiniaFather,
                },
                {
                    name:'CommunicationSlotFather',
                    path:'slot',
                    component: SlotFather,
                },
            ]
        },
        {
            name:'OtherApi',
            path:'/others',
            children:[
                {
                    name:'OtherApiShallow',
                    path:'shallow',
                    component: ShallowVue,
                },
                {
                    name:'OtherApiReadonly',
                    path:'readonly',
                    component: ReadonlyVue,
                },
                {
                    name:'OtherApiRaw',
                    path:'raw',
                    component: RawVue,
                },
                {
                    name:'OtherApiCustomRef',
                    path:'custom',
                    component: CustomRefVue,
                },
            ]
        },
        {
            path:'/about',
            component: About
        },
        {
            path:'/',
            redirect:'/home'
        }
    ]
})

export default router